<template>
  <div class="app-area">
    <div class="hotArea">
      <div class="title">
        热门城市
      </div>
      <div class="hotItem">
        <span @click="selectArea(item)" v-for="(item, index) in areaList" :key="index">
          {{item.areaName}}
        </span>
      </div>
    </div>
    <van-index-bar>
      <van-index-anchor index="A" />
      <van-cell @click="selectArea(item)" v-for="(item, index) in areaList" :key="index" :title="item.areaName" />
    </van-index-bar>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mineApi } from '@/api'
export default {
  name: 'area-select',
  components: {
  },
  async created() {
    const res = await mineApi.getArea({
      id: 10
    })
    this.areaList = res.data
    this.format()
  },
  mounted() {
  },
  data() {
    return {
      areaList: []
    }
  },
  computed: {
    ...mapGetters([
      'searchHistory'
    ])
  },
  methods: {
    selectArea(item) {
      this.saveAreaMap(item)
      this.$router.back()
    },
    format() {

    },
    ...mapActions([
      'saveAreaMap'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
.app-area{
  overflow: hidden;
  background-color: #fafafa;
  .hotArea{
    font-size: 14px;
    .title{
      padding: 10px;
    }
    .hotItem{
      display: flex;
      background-color: #fff;
      padding: 10px;
      span{
        display: block;
        padding: 5px 10px;
        border: 1px solid $color-border;
        margin-right: 10px;
        border-radius: 3px;
      }
    }
  }
}
</style>
